ExtJS একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা ডেটা ম্যানিপুলেশন এবং ভিজ্যুয়ালাইজেশনে বিশেষভাবে কার্যকর। Models এবং Data Binding এক্সটিজেএস-এর অন্যতম প্রধান বৈশিষ্ট্য যা ডেটাকে অ্যাপ্লিকেশনে ব্যবহারযোগ্য করে তোলে এবং ইউজার ইন্টারফেসের সাথে সেগুলির সমন্বয় ঘটায়। এটি ডেটার গঠন, ভ্যালিডেশন এবং তার উপর ভিত্তি করে ইন্টারফেস তৈরি করার প্রক্রিয়াকে সহজতর করে।
ExtJS মডেল একটি ডেটা স্ট্রাকচার বা ডেটা অবজেক্টের প্রতিনিধিত্ব করে। এটি ফিল্ড এবং ভ্যালিডেশনসহ ডেটার কাঠামো নির্ধারণ করে এবং সাধারণত ডেটাবেস বা API থেকে ডেটা লোড এবং ম্যানিপুলেট করার জন্য ব্যবহৃত হয়।
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model', // Ext.data.Model থেকে এক্সটেন্ড
fields: [
{ name: 'id', type: 'int' }, // ডেটা ফিল্ড
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
],
validations: [
{ type: 'length', field: 'name', min: 3 }, // ভ্যালিডেশন: নামের দৈর্ঘ্য ৩ এর বেশি হতে হবে
{ type: 'email', field: 'email' } // ইমেইল ফিল্ড ভ্যালিডেশন
]
});
এখানে:
fields: মডেলের ডেটা ফিল্ডগুলো এখানে নির্ধারণ করা হয়েছে।validations: ডেটা ভ্যালিডেশন কনফিগারেশন, যা নিশ্চিত করে যে ডেটা নির্দিষ্ট শর্ত পূরণ করে।Data Binding হল একটি প্রক্রিয়া যেখানে ডেটার পরিবর্তন সরাসরি UI-তে প্রভাব ফেলে। এক্সটিজেএসে ডেটা বাইন্ডিং ব্যবহার করে, আপনি ডেটা পরিবর্তন হওয়ার সাথে সাথে তা UI-তে আপডেট করতে পারেন। এটি UI এবং মডেলের মধ্যে সিঙ্ক্রোনাইজেশন তৈরি করে।
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
Ext.create('MyApp.model.User', {
name: 'John Doe',
email: 'john.doe@example.com'
}).bind({
// Binding the model data to the view
itemId: 'userInfo',
listeners: {
'update': function (model, operation, modifiedFieldNames, modifiedValues) {
// Automatically update view when model data changes
Ext.getCmp('userInfo').setHtml('Name: ' + model.get('name') + '<br>Email: ' + model.get('email'));
}
}
});
এখানে:
bind: মডেলের ডেটা সরাসরি ভিউতে বাইন্ড করা হয়েছে।update listener: মডেলের ডেটা পরিবর্তিত হলে ভিউতে তা আপডেট হবে।Ext.create('Ext.form.Panel', {
title: 'User Form',
bodyPadding: 5,
width: 350,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}],
buttons: [{
text: 'Submit',
handler: function () {
var form = this.up('form').getForm();
var model = Ext.create('MyApp.model.User', form.getValues()); // View data is bound to Model
console.log(model.get('name')); // Logs the name from the form to the model
}
}],
renderTo: Ext.getBody()
});
এখানে:
form.getValues(): ফর্মের ইনপুট ডেটা মডেলে প্রেরিত হচ্ছে।model.get(): মডেল থেকে ডেটা গ্রহণ করা হচ্ছে।Store এবং Model-এর মধ্যে সম্পর্ক খুব গুরুত্বপূর্ণ। Store একটি ডেটা সংগ্রহ, যা Model এর ডেটার উপর ভিত্তি করে কাজ করে। Model ডেটার কাঠামো নির্ধারণ করে এবং Store সেই কাঠামো অনুসারে ডেটা লোড করে।
// Model Definition
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
// Store Definition
Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
data: [
{id: 1, name: 'John', email: 'john@example.com'},
{id: 2, name: 'Jane', email: 'jane@example.com'}
]
});
এখানে, store এর মধ্যে model বাইন্ড করা হয়েছে এবং ডেটার মধ্যে রিডেবল ডেটা সঞ্চিত রয়েছে।
ExtJS এর Models এবং Data Binding ডেটা ম্যানিপুলেশনকে সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে, যা ডেভেলপারদের দ্রুত এবং স্কেলযোগ্য অ্যাপ্লিকেশন তৈরি করতে সহায়ক।
ExtJS এর Model হচ্ছে ডেটার কাঠামো বা স্ট্রাকচার, যা ডেটা সংরক্ষণ, রিটার্ন, আপডেট এবং ভ্যালিডেশন পরিচালনা করে। মডেলগুলি সাধারণত একটি store বা proxy ব্যবহার করে ডেটা পরিচালনা করে এবং fields, validations, এবং associations এর মাধ্যমে ডেটার সাথে সম্পর্কিত অপারেশন পরিচালনা করে।
একটি ExtJS Model তৈরি করতে, Ext.define ফাংশন ব্যবহার করতে হয় এবং এটি Ext.data.Model ক্লাস থেকে সম্প্রসারিত (extend) করা হয়।
fields: মডেলের ডেটা ফিল্ডগুলি সংজ্ঞায়িত করা হয় (যেমন: নাম, ইমেইল, ফোন নম্বর ইত্যাদি)।validations: ডেটার বৈধতা পরীক্ষা করার জন্য (যেমন: নামের দৈর্ঘ্য, ইমেইল ফরম্যাট)।associations: মডেলগুলোর মধ্যে সম্পর্ক নির্ধারণ (যেমন: একাধিক রেকর্ডের সাথে সম্পর্কিত মডেল)।proxy: ডেটা সেভ বা লোড করার জন্য।Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
// মডেলের ডেটা ফিল্ড
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'dob', type: 'date', dateFormat: 'Y-m-d' }
],
// মডেলের ভ্যালিডেশন
validations: [
{ type: 'length', field: 'name', min: 3 },
{ type: 'email', field: 'email' }
],
// মডেলের ডেটা অ্যাসোসিয়েশন (যদি প্রয়োজন হয়)
associations: [
{
type: 'hasMany',
model: 'MyApp.model.Order', // সম্পর্কিত মডেল
name: 'orders', // সম্পর্কের নাম
foreignKey: 'user_id' // সম্পর্কের কী
}
],
// ডেটা লোড বা সেভ করার জন্য প্রক্সি কনফিগারেশন
proxy: {
type: 'ajax',
url: '/users', // API URL
reader: {
type: 'json',
rootProperty: 'data' // API থেকে আসা JSON ডেটা রুট
}
}
});
fields:name: ফিল্ডের নাম।type: ফিল্ডের ডেটা টাইপ, যেমন string, int, date।dateFormat: তারিখ ফরম্যাট (যদি প্রয়োজন হয়)।validations:type: ভ্যালিডেশনের ধরন (যেমন: length, email, presence)।field: যেই ফিল্ডে ভ্যালিডেশন হবে।min, max: ভ্যালিডেশন সীমা (যেমন দৈর্ঘ্য)।associations:type: সম্পর্কের ধরন, যেমন hasMany, belongsTo ইত্যাদি।model: সম্পর্কিত মডেলের নাম।foreignKey: সম্পর্কের কী।proxy:type: ডেটা লোড বা সেভ করার জন্য ব্যবহৃত প্রযুক্তি (যেমন ajax, localstorage)।url: API URL বা সেভ/লোড করার লোকেশন।reader: API থেকে প্রাপ্ত ডেটার রিডারের ধরন (যেমন: json), এবং rootProperty কনফিগারেশন।মডেল তৈরির পর, আপনি সেই মডেল ব্যবহার করে ডেটা লোড বা সেভ করতে পারেন।
var user = Ext.create('MyApp.model.User', {
name: 'John Doe',
email: 'john.doe@example.com',
dob: '1990-05-15'
});
user.save({
success: function(record, operation) {
console.log('User saved successfully');
},
failure: function(record, operation) {
console.log('Error saving user');
}
});
Ext.create('MyApp.model.User', {
id: 1
}).load({
success: function(record) {
console.log(record.get('name')); // সফলভাবে ডেটা লোড হলে নাম দেখাবে
},
failure: function(record, operation) {
console.log('Error loading user');
}
});
ডেটা ম্যানেজমেন্টে মডেলটি store এর সাথে ব্যবহার করা হয়। স্টোরটি মডেলের ডেটার লিস্ট ধারণ করে এবং ডেটা লোড বা সেভ করতে সাহায্য করে।
var userStore = Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
autoLoad: true // অ্যাপ্লিকেশন লোড হওয়ার পর ডেটা অটোমেটিক লোড হবে
});
userStore.load({
callback: function(records, operation, success) {
if (success) {
var user = records[0]; // প্রথম রেকর্ড
user.set('name', 'Jane Doe'); // নাম আপডেট
user.save(); // সেভ করা
}
}
});
fields: মডেলের ফিল্ড বা ডেটা পয়েন্টগুলির সংজ্ঞা।validations: মডেলের ডেটার ভ্যালিডেশন।associations: মডেলের মধ্যে সম্পর্ক (যেমন hasMany, belongsTo)।proxy: ডেটা লোড এবং সেভ করার জন্য প্রযুক্তি কনফিগারেশন।save() এবং load(): মডেল থেকে ডেটা সেভ বা লোড করার পদ্ধতি।মডেল কনফিগারেশন এবং ডেটা ম্যানিপুলেশনটি ExtJS অ্যাপ্লিকেশনের ডেটা হ্যান্ডলিং ও ভ্যালিডেশন সহজ করে তোলে এবং মডেল ডেটার মধ্যে সম্পর্ক তৈরি করতে সাহায্য করে।
ExtJS এ Associations ডেটাবেসের সম্পর্ক বা রিলেশনশিপের মত কাজ করে, যা ডেটা মডেলগুলির মধ্যে সম্পর্ক তৈরি এবং পরিচালনা করতে সহায়ক। ExtJS এর মডেল সিস্টেম hasMany এবং belongsTo অ্যাসোসিয়েশন সমর্থন করে, যা একাধিক মডেলের মধ্যে সম্পর্ক তৈরি করতে ব্যবহৃত হয়। এই অ্যাসোসিয়েশনগুলি ডেটা মডেলের মধ্যে একে অপরের সাথে সম্পর্ক স্থাপন এবং সহজভাবে ডেটা পরিচালনা করার জন্য অত্যন্ত গুরুত্বপূর্ণ।
hasMany অ্যাসোসিয়েশনhasMany অ্যাসোসিয়েশনটি ব্যবহার করা হয় যখন একটি মডেল অন্য মডেলের একাধিক রেকর্ডের মালিক। উদাহরণস্বরূপ, একটি Customer মডেল একাধিক Order মডেলের মালিক হতে পারে।
hasMany ব্যবহার উদাহরণধরা যাক, একটি Customer মডেল এবং একটি Order মডেল রয়েছে। একটি Customer এর একাধিক Order থাকতে পারে। তাই, Customer মডেলটি Order মডেলের hasMany অ্যাসোসিয়েশন থাকবে।
Customer.js (মডেল):
Ext.define('MyApp.model.Customer', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
hasMany: {
model: 'MyApp.model.Order', // সম্পর্কযুক্ত মডেল
name: 'orders', // অ্যাসোসিয়েশন নাম
foreignKey: 'customer_id' // আউটগোয়িং সম্পর্কের কী
}
});
Order.js (মডেল):
Ext.define('MyApp.model.Order', {
extend: 'Ext.data.Model',
fields: ['id', 'orderDate', 'totalAmount', 'customer_id'],
belongsTo: {
model: 'MyApp.model.Customer', // সম্পর্কযুক্ত মডেল
foreignKey: 'customer_id', // ইনকামিং সম্পর্কের কী
getterName: 'getCustomer' // মডেল রিলেটেড ডেটা পাওয়ার জন্য গেটার ফাংশন
}
});
এখানে, Customer মডেল hasMany অ্যাসোসিয়েশন ব্যবহার করে Order মডেলের একাধিক রেকর্ডের মালিক। অন্যদিকে, Order মডেল belongsTo অ্যাসোসিয়েশন ব্যবহার করে Customer মডেলের সাথে সম্পর্ক স্থাপন করছে।
belongsTo অ্যাসোসিয়েশনbelongsTo অ্যাসোসিয়েশনটি ব্যবহার করা হয় যখন একটি মডেল অন্য একটি মডেলের একক রেকর্ডের সাথে সম্পর্কিত হয়। উদাহরণস্বরূপ, একটি Order মডেল একটি নির্দিষ্ট Customer এর সাথে সম্পর্কিত।
Order.js (মডেল):
Ext.define('MyApp.model.Order', {
extend: 'Ext.data.Model',
fields: ['id', 'orderDate', 'totalAmount', 'customer_id'],
belongsTo: {
model: 'MyApp.model.Customer', // সম্পর্কযুক্ত মডেল
foreignKey: 'customer_id', // ইনকামিং সম্পর্কের কী
getterName: 'getCustomer' // মডেল রিলেটেড ডেটা পাওয়ার জন্য গেটার ফাংশন
}
});
এখানে, Order মডেলটি belongsTo অ্যাসোসিয়েশন ব্যবহার করে Customer মডেলের সাথে সম্পর্কিত। এর মাধ্যমে একটি অর্ডারের সাথে সম্পর্কিত গ্রাহকের তথ্য সহজে পাওয়া যাবে।
আপনি যখন hasMany বা belongsTo অ্যাসোসিয়েশন ব্যবহার করেন, তখন মডেলের সাথে সম্পর্কিত ডেটা লোড করার জন্য আপনি association বা proxy ব্যবহার করতে পারেন।
hasMany অ্যাসোসিয়েশন লোড করার উদাহরণ:var customer = Ext.create('MyApp.model.Customer', {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
});
// অ্যাসোসিয়েশন ডেটা লোড করতে
customer.getOrders().load({
callback: function(orders, operation, success) {
if (success) {
console.log(orders); // গ্রাহকের অর্ডারের তালিকা
}
}
});
এখানে, getOrders() হল hasMany অ্যাসোসিয়েশন দ্বারা সম্পর্কিত Order মডেলগুলির তালিকা ফেরত দেয়।
belongsTo অ্যাসোসিয়েশন লোড করার উদাহরণ:var order = Ext.create('MyApp.model.Order', {
id: 1,
orderDate: '2024-12-01',
totalAmount: 250,
customer_id: 1
});
// অ্যাসোসিয়েশন ডেটা লোড করতে
order.getCustomer().load({
callback: function(customer, operation, success) {
if (success) {
console.log(customer); // অর্ডারের সাথে সম্পর্কিত গ্রাহকের তথ্য
}
}
});
এখানে, getCustomer() হল belongsTo অ্যাসোসিয়েশন দ্বারা সম্পর্কিত Customer মডেলের রেকর্ড।
hasMany অ্যাসোসিয়েশন: একটি মডেল (যেমন Customer) একাধিক মডেল (যেমন Order) এর মালিক হতে পারে। একাধিক সম্পর্কের ডেটা লোড করা সম্ভব।belongsTo অ্যাসোসিয়েশন: একটি মডেল (যেমন Order) অন্য একটি মডেল (যেমন Customer) এর সাথে সম্পর্কিত। একক সম্পর্কের ডেটা লোড করা সম্ভব।ExtJS এর associations (hasMany, belongsTo) ব্যবহার করে আপনি সহজেই ডেটার সম্পর্ক স্থাপন এবং পরিচালনা করতে পারেন, যা বৃহত্তর অ্যাপ্লিকেশন গঠনে সাহায্য করে।
ExtJS-এ Model এবং Field এর জন্য বিভিন্ন বৈশিষ্ট্য (যেমন validation এবং field mapping) প্রদান করা হয়, যা ডেটার গঠন এবং সঠিকতা নিশ্চিত করতে সাহায্য করে। Model Validation ডেটা ভ্যালিডেশন এবং Field Mapping ফিল্ডের মান ম্যাপ করতে ব্যবহৃত হয়।
Model Validation একটি প্রক্রিয়া যার মাধ্যমে ডেটার সঠিকতা যাচাই করা হয়। ExtJS মডেলগুলিতে আপনি বিভিন্ন ধরনের ভ্যালিডেশন যুক্ত করতে পারেন যেমন: length, presence, email, format, inclusion, exclusion, ইত্যাদি।
Presence Validation:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
validations: [
{ type: 'presence', field: 'name', message: 'Name is required' },
{ type: 'presence', field: 'email', message: 'Email is required' }
]
});
এখানে, name এবং email ফিল্ডের জন্য presence ভ্যালিডেশন দেওয়া হয়েছে, যা নিশ্চিত করে যে এগুলি খালি থাকবে না।
Length Validation:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
validations: [
{ type: 'length', field: 'name', min: 3, max: 50, message: 'Name must be between 3 and 50 characters' }
]
});
এখানে, name ফিল্ডের জন্য দৈর্ঘ্য ৩ থেকে ৫০ ক্যারেক্টারের মধ্যে হতে হবে।
Email Validation:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
validations: [
{ type: 'email', field: 'email', message: 'Invalid email address' }
]
});
এখানে, email ফিল্ডের জন্য email ভ্যালিডেশন করা হয়েছে, যা ইমেইল ঠিকানার ফর্ম্যাট চেক করবে।
Custom Validation:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
validations: [
{
type: 'exclusion',
field: 'name',
list: ['Admin', 'Superuser'],
message: 'Name cannot be Admin or Superuser'
}
]
});
এখানে, name ফিল্ডের জন্য exclusion ভ্যালিডেশন করা হয়েছে, যাতে Admin বা Superuser নাম ব্যবহার না করা যায়।
Field Mapping হল ডেটার একটি ফিল্ডকে অন্য একটি ফিল্ডের মানের সাথে সম্পর্কিত বা ম্যাপ করা। এটি ডেটার বিভিন্ন ফরম্যাট বা রেপ্রেজেন্টেশন পরিবর্তন করতে ব্যবহৃত হয়। Field Mapping আপনাকে ডেটা পাঠানোর সময় বা গ্রহণ করার সময় ফিল্ডের মান পরিবর্তন করতে সহায়ক।
Field Mapping with Mapping Property:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'user_id', mapping: 'id' },
{ name: 'full_name', mapping: 'name' },
{ name: 'user_email', mapping: 'email' }
]
});
এখানে, user_id ফিল্ডটি id ফিল্ডের মানের সাথে ম্যাপ করা হয়েছে, full_name ফিল্ডটি name ফিল্ডের মানের সাথে এবং user_email ফিল্ডটি email ফিল্ডের মানের সাথে ম্যাপ করা হয়েছে।
Field Mapping with Function:
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'user_id', mapping: function(data) { return data.id; } },
{ name: 'full_name', mapping: function(data) { return data.name.toUpperCase(); } },
{ name: 'user_email', mapping: 'email' }
]
});
এখানে, name ফিল্ডের মানকে uppercase তে রূপান্তর করা হচ্ছে full_name ফিল্ডে।
ধরা যাক, আমাদের একটি ব্যবহারকারী মডেল রয়েছে যার মধ্যে কিছু ভ্যালিডেশন এবং ফিল্ড ম্যাপিং করা হয়েছে:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'user_id', mapping: 'id' },
{ name: 'full_name', mapping: 'name' },
{ name: 'user_email', mapping: 'email' }
],
validations: [
{ type: 'presence', field: 'full_name', message: 'Full Name is required' },
{ type: 'email', field: 'user_email', message: 'Invalid email address' },
{ type: 'length', field: 'full_name', min: 3, max: 50, message: 'Full Name must be between 3 and 50 characters' }
]
});
এখানে:
user_id ফিল্ডটি id এর সাথে ম্যাপ করা হয়েছে।full_name ফিল্ডটি name এর সাথে ম্যাপ করা হয়েছে এবং সেখানে length এবং presence ভ্যালিডেশন রয়েছে।user_email ফিল্ডটি email এর সাথে ম্যাপ করা হয়েছে এবং email ভ্যালিডেশন রয়েছে।এই দুটি ফিচার ExtJS অ্যাপ্লিকেশন ডেভেলপমেন্টে ডেটার সঠিকতা এবং কার্যকারিতা নিশ্চিত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা Data Binding এর মাধ্যমে ডেটা এবং UI-এর মধ্যে একে অপরের সাথে সংযোগ স্থাপন করতে সক্ষম। ডেটা বাইন্ডিং ব্যবহার করে, আপনি UI এবং ডেটার মধ্যে একটি স্বয়ংক্রিয় সম্পর্ক তৈরি করতে পারেন, যাতে UI পরিবর্তিত হলে ডেটাও আপডেট হয় এবং ডেটা পরিবর্তিত হলে UI আপডেট হয়। Two-way binding এই সম্পর্কের উন্নত একটি ফিচার যা উভয় দিক থেকে ডেটা পরিবর্তনের জন্য ব্যবহৃত হয়।
Data Binding হলো একটি পদ্ধতি যেখানে ডেটা (যেমন, মডেল) এবং UI কম্পোনেন্টের মধ্যে একটি সম্পর্ক স্থাপন করা হয়, যাতে একটি পরিবর্তন অপরটিকে স্বয়ংক্রিয়ভাবে আপডেট করে।
ExtJS তে Data Binding প্রধানত মডেল এবং ভিউ কম্পোনেন্টের মধ্যে কাজ করে। যখন মডেল (যেমন, একটি স্টোর বা মডেল) আপডেট হয়, তখন ভিউ (যেমন, গ্রিড, ফর্ম, বা প্যানেল) সেই আপডেটগুলি রিফ্লেক্ট করে এবং এটি UI-তে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
Ext.create('MyApp.model.User', {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
});
Ext.create('Ext.form.Panel', {
title: 'User Information',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
bind: '{name}' // মডেল থেকে ডেটা বাইনড করা হচ্ছে
}],
renderTo: Ext.getBody()
});
এখানে, bind: '{name}' ব্যবহার করে textfield UI কম্পোনেন্টটিকে মডেলের name ফিল্ডের সাথে বাইনড করা হয়েছে। যখন মডেলটির name পরিবর্তিত হবে, তখন UI-তে এটি স্বয়ংক্রিয়ভাবে আপডেট হবে।
Two-way Data Binding একটি শক্তিশালী বৈশিষ্ট্য যা UI এবং ডেটার মধ্যে দুটি দিকনির্দেশক সম্পর্ক তৈরি করে। এর মানে হল যে, UI-তে যে কোনো পরিবর্তন হবে, সেটি মডেল (ডেটা) আপডেট করবে এবং মডেল (ডেটা) পরিবর্তন হলে UI-তে সেটি প্রতিফলিত হবে।
ExtJS তে Two-way Binding কার্যকর করার জন্য bind ব্যবহার করা হয়। এই ফিচারের মাধ্যমে, ব্যবহারকারীর ইনপুট সরাসরি মডেল ডেটার সাথে সংযুক্ত হয় এবং ডেটার পরিবর্তন UI-তে প্রতিফলিত হয়।
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
var user = Ext.create('MyApp.model.User', {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
});
Ext.create('Ext.form.Panel', {
title: 'User Information',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
bind: '{user.name}' // Two-way binding
}],
viewModel: {
data: {
user: user // মডেলকে ভিউমডেল এ যুক্ত করা
}
},
renderTo: Ext.getBody()
});
এখানে, bind: '{user.name}' ব্যবহার করা হয়েছে, যা name ফিল্ডে two-way binding সেট করে। যখন ইউজার ফর্মের name ফিল্ডে কোনো পরিবর্তন করবেন, এটি মডেল (user) এর name ফিল্ডে আপডেট হবে এবং মডেলের name ফিল্ডে কোনো পরিবর্তন হলে UI-তে তা স্বয়ংক্রিয়ভাবে আপডেট হবে।
bind: '{modelField}' ব্যবহৃত হয়।bind: '{modelField}' ব্যবহৃত হয়।ExtJS এর Data Binding এবং Two-way Binding ডেভেলপারদের কোডের জটিলতা কমাতে এবং ডেটা ম্যানেজমেন্টে সুবিধা দেয়, বিশেষ করে ডেটা এবং ইউজার ইন্টারফেসের মধ্যে সিঙ্ক্রোনাইজেশন বজায় রাখতে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
